import styled from 'styled-components'

import border from 'components/styled/border'

const Header=styled.div`
    height:.44rem;
    background:#56D9D1;
    /* line-height:.44rem; */
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-left:.1rem;
    img{
        width:.2rem;
        height:.2rem;
        /* padding-left:.1rem; */
    }
    p{
        text-align:center;
        flex:1;
        font-size:.17rem;
        color:#fff;
    }

`
const ImgInput=styled.div`
    position: relative;
    
    width:.5rem;
    height:.5rem;
    img{
        width:100%;
        height:100%;
        position:absolute;
        z-index:1;
    }
    input{
        opacity:0;
        width:100%;
        height:100%;
        position:absolute;
        z-index:2;
        
    }

`

const LineStyled=border({
    width:'0 0 1px 0',
    comp:styled.div`
        /* div{ */
            padding:0 .15rem;
            height:.7rem;
            display:flex;
            justify-content:space-between;
            align-items:center;
            em{
                font-size:.15rem;
                color:#646464;
            }
            img{
                width:.5rem;
                height:.5rem;
                border-radius:50%;
            }
            p{
                img{
                    width:.1rem;
                    height:.1rem;
                }
            }
            input{
                border:none;
                text-align:right;
            }
        /* } */

    `
})
const ButtSub=styled.button`
    /* button{ */
        margin:.3rem auto 0;
        display:block;
        color:#fff;
        border:none;
        width:1.5rem;
        height:.4rem;
        background:#56D9D1;
        border-radius:.2rem;
        font-size:.16rem;
    /* } */
`


export {
    Header,
    LineStyled,
    ButtSub,
    ImgInput
}

